
import React from 'react'
import axios from '../../axios/axios'
import Draggable from 'react-draggable';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Card,Modal,Input,Button,Layout, Menu, Breadcrumb,Carousel,Row, Col, Divider,Typography, Space, } from 'antd';
import './index.css'
import Particles from 'react-particles-js';

const { Title, Paragraph, Text, } = Typography;
const { Header, Footer, Sider, Content } = Layout;
const { Meta } = Card;




export default class Home extends React.Component {
  constructor(props) {
    super(props);
    // this.addCommonQuery = this.addCommonQuery.bind(this);
    this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
    this.handleTitleChange = this.handleTitleChange.bind(this);

    this.state = {
      visible: false,
    disabled: true,
    bounds: { left: 0, top: 0, bottom: 0, right: 0 },
      title: '',
      q_type: '',
      description:''
    }
  }
  draggleRef = React.createRef();

  showCommonModal = () => {
    this.setState({
      visible: true,
      q_type:'普通问卷'
    });
  };

  showVoteModal = () => {
    this.setState({
      visible: true,
      q_type:'投票问卷'
    });
  };

  showApplyModal = () => {
    this.setState({
      visible: true,
      q_type:'报名问卷'
    });
  };

  showTestModal = () => {
    this.setState({
      visible: true,
      q_type:'考试问卷'
    });
  };

  showEpidemicModal = () => {
    this.setState({
      visible: true,
      q_type:'打卡问卷'
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
    let _this = this;
    if(this.state.q_type=='普通问卷'){
      axios.post('/ques/createQues', this.state)
      .then(res => {
          if (res.data.success === true) {
            console.log(res.data.data);
            let path = {
              pathname: '/edit',
              state: res.data.data,
              title: _this.state.title,
              description:_this.state.description
          };
              _this.props.history.push(path);
          }
      })
    }
    else if(this.state.q_type=='投票问卷'){
      axios.post('/ques/createQues', this.state)
      .then(res => {
          if (res.data.success === true) {
            console.log(res.data.data);
            let path = {
              pathname: '/vote',
              query: res.data.data,
              title: _this.state.title,
              description:_this.state.description
          };
              _this.props.history.push(path);
          }
      })
    }
    else if(this.state.q_type=='报名问卷'){
      axios.post('/ques/createQues', this.state)
      .then(res => {
          if (res.data.success === true) {
            console.log(res.data.data);
            let path = {
              pathname: '/apply',
              query: res.data.data,
              title: _this.state.title,
              description:_this.state.description
          };
              _this.props.history.push(path);
          }
      })
    }
    else if(this.state.q_type=='考试问卷'){
      axios.post('/ques/createQues', this.state)
      .then(res => {
          if (res.data.success === true) {
            console.log(res.data.data);
            let path = {
              pathname: '/test',
              query: res.data.data,
              title: _this.state.title,
              description:_this.state.description
          };
              _this.props.history.push(path);
          }
      })
    }
    else if(this.state.q_type=='打卡问卷'){
      axios.post('/ques/createQues', this.state)
      .then(res => {
          if (res.data.success === true) {
            console.log(res.data.data);
            let path = {
              pathname: '/epidemic',
              state: res.data.data,
              title: _this.state.title,
              description:_this.state.description
          };
              _this.props.history.push(path);
          }
      })
    }
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  onStart = (event, uiData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement;
    const targetRect = this.draggleRef?.current?.getBoundingClientRect();
    this.setState({
      bounds: {
        left: -targetRect?.left + uiData?.x,
        right: clientWidth - (targetRect?.right - uiData?.x),
        top: -targetRect?.top + uiData?.y,
        bottom: clientHeight - (targetRect?.bottom - uiData?.y),
      },
    });
  };
  handleTitleChange(e) {
    let title = this.state.title;
    title = e.target.value;
    this.setState({
        title: title
    });
}
handleDescriptionChange(e) {
  let description = this.state.description;
  description = e.target.value;
  this.setState({
    description: description
  });
}
  // addCommonQuery() {
  //   let _this = this;
  //   axios.post('/ques/createQues', this.state)
  //           .then(res => {
  //             console.log('111')
  //               if (res.data.success === true) {
  //                   console.log(res.data.qid)
  //                   _this.props.history.push('/edit');
  //               }
  //           })
  //         }

  render() {

    return (
      <>
          <Layout className="layout">
          <Particles
                    style={{ position: "fixed", top:0}}
                    height="95%"
                    width="100%"
                    params={{
                        particles: {
                        color: {
                            value: "#000000"
                        },
                        line_linked: {
                            color: {
                            value: "#1E90FF"
                            }
                        },
                        number: {
                            value: 50
                        },
                        size: {
                            value: 3.25
                        }
                        }
                    }}
                />
    <Header>
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
      </Menu>
    </Header>
    <Content style={{ margin: '24px 16px 0', overflow: 'initial',padding: '0 50px' }}>
    <Breadcrumb style={{ margin: '16px 0' ,textAlign: 'center'}}>
        <Breadcrumb.Item><h1>
          ~~~创建您的问卷，请选择您需要的问卷类型~~~
        </h1></Breadcrumb.Item>
      </Breadcrumb>
    <div className="site-layout-background" style={{ padding: 8, textAlign: 'center', marginTop: '32px' }} id="demo">
      <div className="site-layout-content">
      <Row justify="space-around">
      <Col span={3}>
      <div onClick={this.showCommonModal}>
              <Card title="新建"
                hoverable
                style={{ width: 160 }}
                bodyStyle={{backgroundColor: 'rgba(30, 144, 255, 1)', border: 0 }}

                // cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
              >
                <Meta title="普通问卷"  />
              </Card>
            </div>
      </Col>
      <Col span={3}>
      <div onClick={this.showVoteModal}>
              <Card title="新建"
                hoverable
                style={{ width: 160 }}
                bodyStyle={{backgroundColor: 'rgba(30, 144, 255, 1)', border: 0 }}

                // cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
              >
                <Meta title="投票问卷"  />
              </Card>
            </div>
      </Col>
      <Col span={3}>
      <div onClick={this.showApplyModal}>
              <Card title="新建"
                hoverable
                style={{ width: 160 }}
                bodyStyle={{backgroundColor: 'rgba(30, 144, 255, 1)', border: 0 }}

                // cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
              >
                <Meta title="报名问卷"  />
              </Card>
            </div>
      </Col>
      <Col span={3}>
      <div onClick={this.showTestModal}>
              <Card title="新建"
                hoverable
                style={{ width: 160 }}
                bodyStyle={{backgroundColor: 'rgba(30, 144, 255, 1)', border: 0 }}

                // cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
              >
                <Meta title="考试问卷"  />
              </Card>
            </div>
      </Col>
      <Col span={3}>
      <div onClick={this.showEpidemicModal}>
              <Card title="新建"
                hoverable
                style={{ width: 160 }}
                bodyStyle={{backgroundColor: 'rgba(30, 144, 255, 1)', border: 0 }}

                // cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
              >
                <Meta title="打卡问卷"  />
              </Card>
            </div>
      </Col>
      <Modal title={
            <div
              style={{
                width: '100%',
                cursor: 'move',
              }}
              onMouseOver={() => {
                if (this.state.disabled) {
                  this.setState({
                    disabled: false,
                  });
                }
              }}
              onMouseOut={() => {
                this.setState({
                  disabled: true,
                });
              }}
              
              onFocus={() => {}}
              onBlur={() => {}}

            >
              {this.state.q_type}
            </div>
          }
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okButtonProps={{ disabled: true }}
          cancelButtonProps={{ disabled: true }}
          footer={[
            <Button key="back" onClick={this.handleCancel}>取消</Button>,
            <Button key="submit" type="primary"  onClick={this.handleOk}>
                确定  
            </Button>
          ]}
          modalRender={modal => (
            <Draggable
              disabled={this.state.disabled}
              bounds={this.state.bounds}
              onStart={(event, uiData) => this.onStart(event, uiData)}
            >
              <div ref={this.draggleRef}>{modal}</div>
            </Draggable>
          )}
        >
        <p>问卷标题</p>
         <Input onChange={(e) => this.handleTitleChange(e)}/>
          <br />
          <p>问卷描述</p>
          <Input  onChange={(e) => this.handleDescriptionChange(e)}/>
          <br/>
          
        </Modal>
    </Row>
      </div>
    </div>
      
    </Content>
    <Footer style={{ textAlign: 'center' }}>~~~欢迎来到问卷星球~~~</Footer>
  </Layout>
      </>
  )

  }
}
